<template>
  <div id="wrap">
    <!-- 顶部 -->
    <header>
      <van-nav-bar title="杭州名医工作室" left-arrow @click-left="onClickLeft">
        <template #right>
          <van-icon
            :name="require('../../assets/HealthMall_img/icon转发@2x.png')"
            size="18"
          />
        </template>
      </van-nav-bar>
    </header>
    <!-- 轮播图 -->
    <div class="banner">
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 科室 -->
    <div class="ks_list">
      <ul>
        <li
          v-for="(value, index) in department"
          :key="index"
          @click="chooseks(value)"
        >
          {{ value.ksname }}
        </li>
      </ul>
    </div>
    <!-- 医生列表 -->
    <div class="doctoeli">
      <ul>
        <li v-for="(item, index) in doctorli" :key="index">
          <img :src="item.imgUrl" alt="" />
          <div class="info">
            <p class="name">
              {{ item.name }}&nbsp;<span
                >{{ item.Position }}·{{ item.Departments }}</span
              >
            </p>
            <span class="span hospital">{{ item.hospital }}</span>
            <span class="span context">{{ item.adept }}</span>
            <div class="reply">
              <p>
                咨询&nbsp;<span>{{ item.consult }}人</span>
              </p>
              <p>
                评分&nbsp;<span>{{ item.Praise }}</span>
              </p>
            </div>
            <div class="pay">
              <span class="price">￥{{ item.textPrice }}</span>
              <span class="question">立即咨询</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
// import { reactive } from "@vue/reactivity";
import { useRouter } from "vue-router";
import { computed, onMounted } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    // 变量
    const router = useRouter();
    const store = useStore();
    const images = [
      require("../../assets/img/严春晓.png"),
      require("../../assets/img/于慧明@2x.png"),
      require("../../assets/img/孙朝辉.png"),
      require("../../assets/img/许毅.png"),
      require("../../assets/img/陈丹青.png"),
    ];
    const department = computed(() => store.state.departmentModul.department);
    const departmentsApi = () => store.dispatch("departmentsApi");
    const doctorli = computed(() => store.state.departmentModul.doctorli);
    // 方法
    const onClickLeft = () => {
      router.go(-1);
    };
    const chooseks = (value) => {
      store.dispatch("getdoctor", { id: value.ksid });
      console.log(value.ksid);
    };
    onMounted(() => {
      departmentsApi();
      store.dispatch("getdoctor", { id: "01" });
    });

    // 暴露
    return {
      // 变量
      router,
      images,
      department,
      doctorli,
      // 方法
      onClickLeft,
      departmentsApi,
      chooseks,
    };
  },
};
</script>

<style lang="less">
@import "../../assets/css/workoffer.less";
</style>
>
